代码高亮

使用 gitbook 默认高亮

对于大多数被广泛使用的语言，无需做任何配置，在 markdown 中插入代码块就行。

但是如果你要插入一种未被支持的语言，代码块就没有任何高亮，看起来比较丑。

下面给出我的一种解决方案：

使用 prism 插件

禁用 gitbook 默认高亮并使用 prism 高亮插件：

// book.json
{
    "plugins": [
        "-highlight",
        "prism"
    ],
    "pluginsConfig": {
        "prism": {
            // 设置个人比较喜欢的暗色调主题
            // 可以去同目录下找更多的主题
            "css": ["prismjs/themes/prism-tomorrom.css"]
        }
    }
}

随后通过 gitbook install 安装插件。

最后 gitbook build 就可以看到效果了。

添加自己的语言支持

在安装 prism 插件后，我们可以看一下 node_modules/prismjs/components 文件夹，里面包含了目前可用的所有语言支持。比如说有一个 prism-c.js ，那么就表明支持 C 语言。

下面以我支持 riscv 汇编高亮的流程来举例说明一下：

写一个 prism-riscv.js 并复制到 components 文件夹下，可在这里找到。这里面只进行简单的词法分析，使用一个正则表达式 pattern 来匹配一种词，并使用别名 alias 来描述这种词的类型，其实也就是决定最后渲染出来这种词的颜色。

我这里大概就是寄存器一种颜色，指令一种颜色，伪指令一种颜色。对于汇编语言这也就够了。

然而 prism 还支持更高级一点的语法分析。
将你的语言注册到 node_modules/prismjs/components.json。

打开看一下，就是在 languages 插入一个描述你的语言的贡献者和名字的键值对。

我的代码如下：

# add_riscv_component.py

import json

json_path = 'node_modules/prismjs/components.json'

data = json.load(open(json_path))
data['languages']['riscv'] = {'title': 'RISC-V', 'owner': 'shinbokuow2'}
with open(json_path, 'w') as f:
f.write(json.dumps(data, sort_keys = True, indent = 4))

如果只是自己用的话这就够了，想要为 prism 社区做贡献的参考这里。

在 gitbook build 之前做完上面两步，build 之后你会发现 riscv 代码块被正确高亮了！

行内代码

gitbook 默认的行内代码和普通字体是一个颜色，我们希望它在灰色背景的同时字体变为红色，更加显眼。

我的做法是在 gitbook build 之后直接暴力改生成的 css 。这个 css 放在 docs/gitbook/style.css。（build 之后的结果本来应该放在 _book 文件夹下，为了套用 Github Page 将其重命名为 docs）

# add_code_style.py

s = open('docs/gitbook/style.css').read()
code = 'markdown-section code{'
color_red = 'color:#bf616a;'
code_in_pre = 'markdown-section pre>code{'
color_inherit = 'color:#ccc;'
s = s.replace(code, code + color_red)
s = s.replace(code_in_pre, code_in_pre + color_inherit)
with open('docs/gitbook/style.css', 'w') as f:
    f.write(s)

3.3. 代码高亮